<template>
    <Header />
    <div class="content">
        <el-card shadow="never" style="margin-bottom: 20px;">
            <template #header>
                <div class="header-container">
                    <div class="icon-container">
                        <el-icon class="Dish">
                            <Dish />
                        </el-icon>
                    </div>
                    <div class="text-container">
                        <h3>美食详情</h3>
                        <p style="color: #aaa; font-size: 13px;">一个高端的美食分享平台</p>
                    </div>
                </div>
            </template>
            <el-skeleton :loading="loading" animated>
                <template #template>
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-skeleton-item variant="image" style="width: 100%; height: 200px;" />
                            <el-skeleton-item variant="text" style="width: 50%; margin-top: 16px;" />
                            <el-skeleton-item variant="text" style="width: 80%; margin-top: 16px;" />
                        </el-col>
                        <el-col :span="14">
                            <el-skeleton-item variant="text" style="width: 50%; margin-top: 16px;" />
                            <el-skeleton-item variant="text" style="width: 80%; margin-top: 16px;" />
                            <el-skeleton-item variant="text" style="width: 100%; margin-top: 16px;" />
                            <el-skeleton-item variant="text" style="width: 50%; margin-top: 16px;" />
                            <el-skeleton-item variant="text" style="width: 80%; margin-top: 16px;" />
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-skeleton-item variant="text" style="width: 100%; margin-top: 16px;" />
                            <el-skeleton-item variant="text" style="width: 100%; margin-top: 16px;" />
                        </el-col>
                    </el-row>
                </template>
                <template #default>
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <div v-for="(food, index) in foodDetail" :key="index">
                                <el-image :src="`http://localhost/storage/${food.image}`"
                                    :preview-src-list="[`http://localhost/storage/${food.image}`]" :zoom-rate="1.2"
                                    :max-scale="7" :min-scale="0.2" :initial-index="0" fit="cover" alt="美食图片">
                                </el-image>

                                <h3 class="title"><el-tag class="cate">{{ food.category_name }}</el-tag>{{ food.title }}
                                </h3>
                                <p class="info-container">
                                    <span>
                                        <el-icon>
                                            <UserFilled />
                                        </el-icon>
                                        {{ food.username }}
                                    </span>
                                    <span>
                                        <el-icon>
                                            <Timer />
                                        </el-icon>
                                        {{ food.create_time }}
                                    </span>
                                </p>
                            </div>
                        </el-col>
                        <el-col :span="14">
                            <div v-for="(food, index) in foodDetail" :key="index" class="food-info">
                                <div class="form-container">
                                    <form>
                                        <div>
                                            <label for="origin">产地:</label>
                                            <span id="origin">{{ food.origin }}</span>
                                        </div>
                                        <div>
                                            <label for="tags">标签:</label>
                                            <div id="tags" class="tags">
                                                <el-tag v-for="tag in (food.tags || '').split(',')" :key="tag"
                                                    style="margin-right: 10px;">
                                                    {{ tag }}
                                                </el-tag>
                                            </div>
                                        </div>
                                        <div>
                                            <label for="reason">推荐理由:</label>
                                            <span id="reason">{{ food.reason }}</span>
                                        </div>
                                    </form>
                                    <div class="recommendation" v-if="scorelist == null">
                                        <span>推荐系数:</span>
                                        <el-rate v-model="score" :colors="colors" />
                                        <el-button @click="Subumitscore">提交评分</el-button>
                                    </div>
                                    <div class="recommendation" v-else>
                                        <span>推荐系数:</span>
                                        <el-rate v-model="scores" :colors="colors" />
                                        <el-button @click="message">提交评分</el-button>
                                    </div>
                                    <div class="favorites" v-if="collectlist == null">
                                        <span>收藏量：{{ food.collect_count }} </span>
                                        <el-tooltip content="收藏" placement="top">
                                            <el-icon @click="toggleFavorite">
                                                <FolderChecked style="color: #aaa;" />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                    <div class="favorites" v-else>
                                        <span>收藏量：{{ food.collect_count }} </span>
                                        <el-tooltip content="取消收藏" placement="top">
                                            <el-icon @click="detale">
                                                <FolderChecked style="color: blue;" />
                                            </el-icon>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div v-for="(food, index) in foodDetail" :key="index" class="food-content">
                                <h4>内容</h4>
                                <p>{{ food.content }}</p>
                            </div>
                        </el-col>
                    </el-row>
                </template>
            </el-skeleton>
        </el-card>
        <Comments :ids="foodId" :target_type="target_type" />
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { getfooddetail, postscore, getscore, postcollect, getcollect, detalecollect } from '~/api/food'
import { useRoute } from 'vue-router';
import Header from '~/components/Header.vue';
import Comments from '~/components/Comments.vue';
import { ElNotification } from 'element-plus';
import { useCookies } from '@vueuse/integrations/useCookies';

const route = useRoute();
const foodId = route.params.id;
const cookies = useCookies();
const user_id = cookies.get('use_id');
const target_type = ref('美食');
const foodDetail = ref({});
const loading = ref(true);
const score = ref(0);
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const scores = ref(0);
const scorelist = ref({});
const collectlist = ref({});

getfooddetail(foodId).then(res => {
    // console.log(res);
    foodDetail.value = res;
    loading.value = false;
})
getscore(foodId, user_id, target_type.value).then(res => {
    scorelist.value = res.scorelist;
    if (res.scorelist && res.scorelist.score !== null) {
        scores.value = parseInt(res.scorelist.score);
    } else {
        scores.value = 0; // 或者其他默认值
    }
})
getcollect(foodId, user_id, target_type.value).then(res => {
    console.log(res);
    collectlist.value = res.collectlist;
})
const Subumitscore = () => {
    postscore(user_id, foodId, target_type.value, score.value).then(res => {
        ElNotification({
            message: res.message,
            type: 'success',
            duration: 3000
        });
    })
}
const message = () => {
    ElNotification({
        message: '你已经评价过了,请勿重复评价',
        type: 'error',
        duration: 3000
    });
}

const toggleFavorite = () => {
    postcollect(user_id, foodId, target_type.value).then(res => {
        ElNotification({
            message: res.message,
            type: 'success',
            duration: 3000
        });
        window.location.reload();
    })
}
const detale = () => {
    detalecollect(user_id, foodId, target_type.value).then(res => {
        ElNotification({
            message: res.message,
            type: 'success',
            duration: 3000
        });
        window.location.reload();
    })
}
</script>
<style scoped>
.content {
    margin: 20px auto;
    width: 1024px;
}

.Dish {
    color: hsl(64, 100%, 50%);
}

.el-icon {
    width: 40px;
    height: auto;
}

.el-icon svg {
    height: 40px;
    width: 40px;
}

.content_item {
    margin-bottom: 20px;
}

/* 头部样式 */
.header-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.icon-container {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

.el-tag.cate {
    margin-right: 10px;
}

.favorites,
.recommendation {
    display: flex;
    line-height: 32px;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.favorites,
.recommendation span {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.favorites .el-icon {
    width: 16px;
}

.food-content {
    border-top: 1px solid black;
}

.food-content h4 {
    margin-top: 20px;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.food-content p {
    text-indent: 2em;
    line-height: 32px;
}

/* 新增的表单样式 */
.form-container {
    padding: 20px;
}

.form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-container span {
    margin-bottom: 15px;
    line-height: 1.5;
}

.info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.info-container .el-icon svg {
    height: 16px;
    width: 16px;
}

.info-container span {
    line-height: 16px;
    font-size: 16px;
    margin-bottom: 5px;
}
</style>